<template>
  <div class="bigBoxs p-15 otherStyle">
    <el-row :gutter="18">
      <!-- 摄像机在线率 -->
      <el-col :span="6">
        <echarts-load v-if="SxFlag || reload_shexian" :chartFlag="SxFlag" :reload="reload_shexian" @refreshF="refreshSx" />
        <original-pie v-else :pieData_sx="echartData1" @child-event-sxj="parentEventSxj" />
      </el-col>
      <!-- 近30天摄像机在线率走势 -->
      <el-col :span="18">
        <echarts-load v-if="ZsFlag || reload_Zs" :chartFlag="ZsFlag" :reload="reload_Zs" @refreshF="refreshZs" />
        <charts-line v-else :chartsData="echartData5" />
      </el-col>
    </el-row>
    <el-row :gutter="18">
      <!-- 运维主机(前卫)在线率 -->
      <el-col :span="8">
        <echarts-load v-if="ZxFlag || reload_Zx" :chartFlag="ZxFlag" :reload="reload_Zx" @refreshF="refreshZx" />
        <original-pie v-else :pieData_sx="echartData3" @child-event-qw="parentEventQw" />
      </el-col>
      <!-- 全网可计量能耗设备占比 -->
      <el-col :span="8">
        <echarts-load v-if="ZbFlag || reload_Zb" :chartFlag="ZbFlag" :reload="reload_Zb" @refreshF="refreshZb" />
        <polycyclic-pie v-else :pieData_sx="echartData4" />
      </el-col>
      <!-- 全网计量设备有功功率(实时) -->
      <el-col :span="8">
        <echarts-load v-if="GlFlag || reload_Gl" :chartFlag="GlFlag" :reload="reload_Gl" @refreshF="refreshGl" />
        <panel-pie v-else :pieData_sx="echartData2" />
      </el-col>
    </el-row>
    <!-- 近30天运维主机(前卫)及挂载设备消耗能耗 -->
    <el-row>
      <el-col>
        <echarts-load v-if="NhFlag || reload_Nh" :chartFlag="NhFlag" :reload="reload_Nh" @refreshF="refreshNh" />
        <charts-line v-else :chartsData="echartData6" />
      </el-col>
    </el-row>
    <!-- 摄像机离线提示窗 -->
    <el-dialog title="摄像机离线" :visible.sync="dialogVisible_sxj" width="50%" :before-close="handleClose_sxj">
      <!-- 表格 -->
      <el-table
        :data="gridData_sxj"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        border
        highlight-current-row
        stripe
        v-loading="gridLoad_sxj"
        max-height="460px"
      >
        <template slot="empty">{{ gridMessage_sxj }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column min-width="120" property="date" label="资产名称">
          <template slot-scope="scope">
            <span>{{ scope.row.zcmc }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="200" property="date" label="安装地址">
          <template slot-scope="scope">
            <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" property="date" label="IP">
          <template slot-scope="scope">
            <span>{{ scope.row.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="80" property="date" label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.ppmc }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" property="date" label="型号">
          <template slot-scope="scope">
            <span>{{ scope.row.xh }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row noBorder">
        <el-col :span="12">
          <el-pagination background @current-change="handleCurrentChange_sxj" :current-page="currentPage_sxj" layout=" prev, pager, next,total" :total="total_sxj"></el-pagination>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-button type="primary" size="small" @click="dialogVisible_sxj = false" class="btnSizeStyle">关 闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 运维主机(前卫)在线率 -->
    <el-dialog title=" 运维主机(前卫)" :visible.sync="dialogVisible_zj" width="50%" :before-close="handleClose_zj">
      <!-- 搜索条件 -->
      <el-form :inline="true" :model="searchCriteria">
        <el-form-item label="状态:">
          <el-select v-model="searchCriteria.gdType" filterable placeholder="请选择/搜索">
            <el-option label="在线" :value="0"></el-option>
            <el-option label="离线" :value="1"></el-option>
            <el-option label="休眠" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn()">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="gridData_zj"
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        border
        highlight-current-row
        stripe
        v-loading="gridLoad_zj"
        max-height="460px"
      >
        <template slot="empty">{{ gridMessage_zj }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column min-width="120" property="date" label="资产名称">
          <template slot-scope="scope">
            <span>{{ scope.row.zcmc }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="200" property="date" label="安装地址" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" property="date" label="IP">
          <template slot-scope="scope">
            <span>{{ scope.row.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="80" property="date" label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.ppmc }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" property="date" label="型号">
          <template slot-scope="scope">
            <span>{{ scope.row.xh }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" property="date" label="序列号">
          <template slot-scope="scope">
            <span>{{ scope.row.sbxlh }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row noBorder">
        <el-col :span="12">
          <el-pagination background @current-change="handleCurrentChange_zj" :current-page="currentPage_zj" layout=" prev, pager, next,total" :total="total_zj"></el-pagination>
        </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-button type="primary" size="small" @click="dialogVisible_zj = false" class="btnSizeStyle">关 闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { ziC, xunJian } from '@/utils/allUrl.js'
import echartsLoad from '@/components/Echarts/echartsLoad'
import { timeLoad, timestampToTime, tableMessageText } from '@/assets/js/setTime'
import originalPie from '@/components/Echarts/ZCGK/originalPie' // 前卫主机和摄像机总数
import polycyclicPie from '@/components/Echarts/ZCGK/polycyclicPie' // 全网能耗占比
import panelPie from '@/components/Echarts/ZCGK/panelPie' // 全网计量设备有功功率
import chartsLine from '@/components/Echarts/ZCGK/chartsLine' // 全网计量设备有功功率
// import { setUrl } from '@/utils/getUrl.js'
export default {
  components: { echartsLoad, originalPie, polycyclicPie, panelPie, chartsLine },
  data() {
    return {
      dinshiqi: null,
      SxFlag: false, // 摄像机总数
      reload_shexian: false,
      echartData1: [],
      sxTimer: null,
      ZsFlag: false, // 近30天摄像机在线率走势
      reload_Zs: false,
      zsTimer: null,
      echartData5: {},
      ZxFlag: false, // 前卫主机在线率
      reload_Zx: false,
      zxTimer: null,
      echartData3: {},
      ZbFlag: false, // 全网可计量能耗设备占比
      reload_Zb: false,
      zbTimer: null,
      echartData4: [
        { value: 0, name: '无计量设备' },
        { value: 0, name: '可计量能耗设备' },
        { value: 0, name: '可计量点位设备' },
      ],
      GlFlag: false, // 全网计量设备有功功率
      reload_Gl: false,
      glTimer: null,
      echartData2: {},
      NhFlag: false, //  近30天前卫主机及挂载设备累积能耗
      reload_Nh: false,
      nhTimer: null,
      echartData6: {},
      dialogVisible_sxj: false,
      gridData_sxj: [],
      currentPage_sxj: 1,
      total_sxj: 0,
      gridLoad_sxj: false,
      gridMessage_sxj: '',
      gridTimer_sxj: null,
      dialogVisible_zj: false,
      gridData_zj: [],
      gridLoad_zj: false,
      gridMessage_zj: '',
      currentPage_zj: 1,
      total_zj: 0,
      gridTimer_zj: null,
      searchCriteria: {
        gdType: '',
      },
    }
  },
  watch: {
    SxFlag(newVal, oldVal) {
      this.sxTimer = setTimeout(() => {
        if (this.SxFlag) {
          this.SxFlag = false
          this.reload_shexian = true
        }
      }, timeLoad)
    },
    ZsFlag(newVal, oldVal) {
      this.zsTimer = setTimeout(() => {
        if (this.ZsFlag) {
          this.ZsFlag = false
          this.reload_Zs = true
        }
      }, timeLoad)
    },
    ZxFlag(newVal, oldVal) {
      this.zxTimer = setTimeout(() => {
        if (this.ZxFlag) {
          this.ZxFlag = false
          this.reload_Zx = true
        }
      }, timeLoad)
    },
    ZbFlag(newVal, oldVal) {
      this.zbTimer = setTimeout(() => {
        if (this.ZbFlag) {
          this.ZbFlag = false
          this.reload_Zb = true
        }
      }, timeLoad)
    },
    GlFlag(newVal, oldVal) {
      this.glTimer = setTimeout(() => {
        if (this.GlFlag) {
          this.GlFlag = false
          this.reload_Gl = true
        }
      }, timeLoad)
    },
    NhFlag(newVal, oldVal) {
      this.nhTimer = setTimeout(() => {
        if (this.NhFlag) {
          this.NhFlag = false
          this.reload_Nh = true
        }
      }, timeLoad)
    },
    gridLoad_sxj(newVal, oldVal) {
      this.gridTimer_sxj = setTimeout(() => {
        if (this.gridLoad_sxj) {
          this.gridLoad_sxj = false
          this.gridMessage_sxj = tableMessageText
          this.gridData_sxj = []
        }
      }, timeLoad)
    },
    gridLoad_zj(newVal, oldVal) {
      this.gridTimer_zj = setTimeout(() => {
        if (this.gridLoad_zj) {
          this.gridLoad_zj = false
          this.gridMessage_zj = tableMessageText
          this.gridData_zj = []
        }
      }, timeLoad)
    },
  },
  created() {
    this.getshexianList() // 摄像机总数
    this.getshexianjizoulv() // 近30天摄像机在线率走势
    this.getquanweizaixian() // 前卫主机在线率
    this.getnenhaoList() // 全网可计量能耗设备占比
    this.getyougongonlv() // 全网计量设备有功功率
    this.getxiaohaonenhao() // 近30天前卫主机及挂载设备消耗能耗
  },
  methods: {
    // 摄像头总数
    async getshexianList() {
      clearTimeout(this.sxTimer)
      this.SxFlag = true
      var list = []
      const { data: res } = await this.$http.post(`${ziC}zcgl/sxjzsTongJi`)
      switch (res.code) {
        case '0000':
          list = [
            { value: res.data.ZX, name: '在线' },
            { value: res.data.LX, name: '离线' },
          ]
          this.echartData1 = { id: 'shexian', title: '摄像机在线率', titleText: '摄像机数量', series: '摄像机', list: list }
          break
        case '0013':
          list = [
            { value: 0, name: '在线' },
            { value: 0, name: '离线' },
          ]
          this.echartData1 = { id: 'shexian', title: '摄像机在线率', titleText: '摄像机数量', series: '摄像机', list: list }
          break
        default:
          this.reload_shexian = true
          break
      }
      this.SxFlag = false
    },
    // 摄像头总数-刷新
    refreshSx() {
      this.reload_shexian = false
      this.getshexianList()
    },
    // 近30天摄像机在线率走势
    async getshexianjizoulv() {
      clearTimeout(this.zsTimer)
      this.ZsFlag = true
      var arr = []
      const { data: res } = await this.$http.post(`${xunJian}tj/selectTjs`)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            const newArr = [item.date_SIGN, item.zxl]
            arr.push(newArr)
          })
          this.echartData5 = { id: 'shexiantreeday', data: arr, type: 'green' }
          break
        case '0013':
          arr = timestampToTime().dateList
          this.echartData5 = { id: 'shexiantreeday', data: arr, type: 'green' }
          break
        default:
          this.reload_Zs = true
          break
      }
      this.ZsFlag = false
    },
    //  近30天摄像机在线率走势-刷新
    refreshZs() {
      this.reload_Zs = false
      this.getshexianjizoulv()
    },
    // 前卫主机在线率
    async getquanweizaixian() {
      clearTimeout(this.zxTimer)
      this.ZxFlag = true
      let list = []
      const { data: res } = await this.$http.post(`${ziC}zcgl/ywzjzsTongJi`)
      switch (res.code) {
        case '0000':
          list = [
            { value: res.data.ZX, name: '在线' },
            { value: res.data.LX, name: '离线' },
            { value: res.data.DD, name: '休眠' },
          ]
          this.echartData3 = { id: 'zjzxl', title: '运维主机(前卫)在线率', titleText: '运维主机数量', series: '运维主机', list: list }
          break
        case '0013':
          list = [
            { value: 0, name: '在线' },
            { value: 0, name: '离线' },
            { value: 0, name: '休眠' },
          ]
          this.echartData3 = { id: 'zjzxl', title: '运维主机(前卫)在线率', titleText: '运维主机数量', series: '运维主机', list: list }
          break
        default:
          this.reload_Zx = true
          break
      }
      this.ZxFlag = false
    },
    // 前卫主机在线率-刷新
    refreshZx() {
      this.reload_Zx = false
      this.getquanweizaixian()
    },
    // 全网可计量能耗设备占比
    async getnenhaoList() {
      clearTimeout(this.zbTimer)
      this.ZbFlag = true
      const { data: res } = await this.$http.post(`${ziC}zcgl/nhjlTongJi`)
      var list = []
      switch (res.code) {
        case '0000':
          list = [
            // { value: res.data.JLSB, name: '无计量设备' },
            // { value: res.data.QTSB, name: '可计量能耗设备' },
            // { value: res.data.DWSB, name: '可计量点位设备' },
            { value: res.data.JLSB, name: '无计量能耗设备' },
            { value: res.data.QTSB, name: '有计量能耗设备' },
          ]
          this.echartData4 = list
          break
        case '0013':
          list = [
            { value: 0, name: '无计量能耗设备' },
            { value: 0, name: '有计量能耗设备' },
          ]
          this.echartData4 = list
          break
        default:
          this.reload_Zb = true
          break
      }
      this.ZbFlag = false
    },
    // 全网可计量能耗设备占比-刷新
    refreshZb() {
      this.reload_Zb = false
      this.getnenhaoList()
    },
    // 全网计量设备有功功率
    async getyougongonlv() {
      clearTimeout(this.glTimer)
      this.GlFlag = true
      const { data: res } = await this.$http.post(`${ziC}power/selectSum`)
      switch (res.code) {
        case '0000':
          var num = res.data.power / res.data.QTSB
          this.echartData2 = {
            power: res.data.power,
            average: num.toFixed(3), // 平均数四舍五入保留三位小数
            QTSB: res.data.QTSB, // 有计量能耗设备
          }
          break
        case '0013':
          this.echartData2 = {
            power: 0,
            average: 0, // 平均数
            QTSB: 0, // 有计量能耗设备
          }
          break
        default:
          this.reload_Gl = true
          break
      }
      this.GlFlag = false
    },
    // 全网计量设备有功功率-刷新
    refreshGl() {
      this.reload_Gl = false
      this.getyougongonlv()
    },
    // 近30天前卫主机及挂载设备消耗能耗
    async getxiaohaonenhao() {
      clearTimeout(this.nhTimer)
      this.NhFlag = true
      const { data: res } = await this.$http.post(`${xunJian}tj/selectPower`)
      var arr = []
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            const newArr = [item.date_SIGN, item.zxl]
            arr.push(newArr)
          })
          var obj = { id: 'zhujiGZ', data: arr, type: 'blue' }
          this.echartData6 = obj
          break
        case '0013':
          arr = timestampToTime().dateList
          this.echartData6 = { id: 'zhujiGZ', data: arr, type: 'blue' }
          break
        default:
          this.reload_Nh = true
          break
      }
      this.NhFlag = false
    },
    // 近30天前卫主机及挂载设备消耗能耗-刷新
    refreshNh() {
      this.reload_Nh = false
      this.getxiaohaonenhao()
    },
    async handleCurrentChange_sxj(currentPage) {
      console.log(currentPage)
      this.currentPage_sxj = currentPage
      clearTimeout(this.gridTimer)
      this.gridLoad_sxj = true
      const params = new URLSearchParams()
      params.append('ZXZT', 1) // ZXZT    0 在线  1 不在线
      params.append('type', 'sxj') // type  sxj  摄像机  zhuji 主机
      params.append('M_', currentPage)
      params.append('N_', 10)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectVideoCamera`, params)
      const list = {
        dialogVisible: true,
        data: res,
        gridLoad: false,
      }
      this.parentEventSxj(list, 'currentChange')
    },
    handleClose_sxj() {
      this.dialogVisible_sxj = false
    },
    parentEventSxj(params, currentChange) {
      if (currentChange !== 'currentChange') {
        this.currentPage_sxj = 1
      }
      this.dialogVisible_sxj = params.dialogVisible
      // 刷新摄像机
      this.reload_shexian = false
      this.getshexianList()
      clearTimeout(this.gridTimer_sxj)
      this.gridMessage_sxj = ''
      this.gridLoad_sxj = false
      const res = params.data
      switch (res.code) {
        case '0000':
          this.gridData_sxj = res.data.list
          this.total_sxj = res.data.total
          break
        default:
          this.gridData_sxj = []
          this.total_sxj = 0
          this.gridMessage_sxj = res.message
          break
      }
    },
    handleClose_zj() {
      this.dialogVisible_zj = false
    },
    async handleCurrentChange_zj(currentPage) {
      this.currentPage_zj = currentPage
      clearTimeout(this.gridTimer)
      this.gridLoad_zj = true
      const params = new URLSearchParams()
      var typeList = [
        { name: '在线', zxzt: 0 },
        { name: '离线', zxzt: 1 },
        { name: '休眠', zxzt: 2 },
      ]
      params.append('ZXZT', this.searchCriteria.gdType) // ZXZT    0 在线  1 不在线
      params.append('type', 'zhuji') // type  sxj  摄像机  zhuji 主机
      params.append('M_', currentPage)
      params.append('N_', 10)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectVideoCamera`, params)
      this.gridLoad_zj = false
      const list = {
        dialogVisible: true,
        data: res,
        gridLoad: false,
        type: typeList[this.searchCriteria.gdType],
      }
      this.parentEventQw(list, 'currentChange')
    },
    // 运维主机(前卫)在线率弹窗
    parentEventQw(params, currentChange) {
      this.searchCriteria.gdType = params.type.zxzt
      if (currentChange !== 'currentChange') {
        this.currentPage_zj = 1
      }
      this.dialogVisible_zj = params.dialogVisible
      // 前卫主机在线率
      this.reload_Zx = false
      this.getquanweizaixian()
      clearTimeout(this.gridTimer_zj)
      this.gridLoad_zj = false
      this.gridMessage_zj = ''
      const res = params.data
      switch (res.code) {
        case '0000':
          this.gridData_zj = res.data.list
          this.total_zj = res.data.total
          break
        default:
          this.gridData_zj = []
          this.total_zj = 0
          this.gridMessage_zj = res.message
          break
      }
    },
    // 运维主机(前卫)在线率弹窗-查询
    searchBtn() {
      this.handleCurrentChange_zj(1)
    },
  },
  destroyed() {
    clearInterval(this.dinshiqi)
    clearTimeout(this.sxTimer)
    clearTimeout(this.zsTimer)
    clearTimeout(this.zxTimer)
    clearTimeout(this.zbTimer)
    clearTimeout(this.glTimer)
    clearTimeout(this.nhTimer)
  },
}
</script>
<style lang="scss" scoped>
#shexian {
  background-color: #fff;
}
#shexiantreeday {
  background-color: #fff;
}
#zhuji {
  background-color: #fff;
}
#nenhao {
  background-color: #fff;
}
#jilianGL {
  background-color: #fff;
}
#zhujiGZ {
  background-color: #fff;
}
.el-row {
  height: 100%;
  // margin-bottom: 15px;
  // &:first-child {
  //   padding-top: 15px;
  // }
  .el-col {
    height: 420px;
    // margin-left: 15px;
  }
}
.page-row.el-row {
  margin-bottom: 0;
  .el-col {
    height: auto;
  }
}
body {
  background-color: #f7f8fa;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
